<template>
  <div class="home-container">
        <!-- 欢迎区域 -->
        <div class="welcome-section">
          <h2>欢迎回来，管理员</h2>
          <p>{{ currentDate }}</p>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon class="icon-building"><Building /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ totalProperties }}</div>
                <div class="stat-label">房产总数</div>
              </div>
            </div>
          </el-card>
          
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon class="icon-tools"><Tools /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ pendingRepairs }}</div>
                <div class="stat-label">待处理维修</div>
              </div>
            </div>
          </el-card>
          
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon class="icon-wallet"><Wallet /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ feeReminders }}</div>
                <div class="stat-label">费用提醒</div>
              </div>
            </div>
          </el-card>
          
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon class="icon-user"><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">465</div>
                <div class="stat-label">住户数量</div>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 信息表格区域 -->
        <div class="tables-section">
          <!-- 最近维修申请 -->
          <el-card class="table-card">
            <template #header>
              <div class="card-header">
                <span>最近维修申请</span>
                <el-button type="primary" size="small">查看全部</el-button>
              </div>
            </template>
            <el-table :data="recentRepairs" style="width: 100%">
              <el-table-column prop="id" label="申请ID" width="80"></el-table-column>
              <el-table-column prop="property" label="房产位置" width="180"></el-table-column>
              <el-table-column prop="type" label="维修类型"></el-table-column>
              <el-table-column prop="status" label="状态">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '待处理' ? 'warning' : 'success'">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="申请时间"></el-table-column>
            </el-table>
          </el-card>

          <!-- 待收费用提醒 -->
          <el-card class="table-card">
            <template #header>
              <div class="card-header">
                <span>待收费用提醒</span>
                <el-button type="primary" size="small">查看全部</el-button>
              </div>
            </template>
            <el-table :data="feeReminderList" style="width: 100%">
              <el-table-column prop="id" label="费用ID" width="80"></el-table-column>
              <el-table-column prop="property" label="房产位置" width="180"></el-table-column>
              <el-table-column prop="type" label="费用类型"></el-table-column>
              <el-table-column prop="amount" label="金额">
                <template #default="scope">
                  ¥{{ scope.row.amount }}
                </template>
              </el-table-column>
              <el-table-column prop="dueDate" label="截止日期"></el-table-column>
            </el-table>
          </el-card>
        </div>

        <!-- 快捷操作 -->
        <div class="quick-actions">
          <h3>快捷操作</h3>
          <div class="action-buttons">
            <el-button type="primary" icon="Plus" size="large">新增房产</el-button>
            <el-button type="success" icon="DocumentAdd" size="large">新增住户</el-button>
            <el-button type="warning" icon="SetUp" size="large">设置费用</el-button>
            <el-button type="info" icon="DataLine" size="large">数据统计</el-button>
          </div>
        </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  Building, Tools, Wallet, User 
} from '@element-plus/icons-vue'

// 响应式数据
const currentDate = ref('')
const totalProperties = ref(128)
const pendingRepairs = ref(24)
const feeReminders = ref(12)
const recentRepairs = ref([])
const feeReminderList = ref([])

// 最近维修申请数据
const initRecentRepairs = () => {
  recentRepairs.value = [
    { id: '001', property: '1号楼1单元101', type: '水电维修', status: '待处理', time: '2023-11-15 09:23' },
    { id: '002', property: '2号楼2单元302', type: '家具维修', status: '待处理', time: '2023-11-15 08:45' },
    { id: '003', property: '3号楼1单元501', type: '电器维修', status: '已完成', time: '2023-11-14 16:30' },
    { id: '004', property: '1号楼3单元203', type: '水电维修', status: '待处理', time: '2023-11-14 14:20' },
    { id: '005', property: '2号楼1单元401', type: '家具维修', status: '已完成', time: '2023-11-14 10:15' }
  ]
}

// 待收费用提醒数据
const initFeeReminders = () => {
  feeReminderList.value = [
    { id: '101', property: '1号楼1单元101', type: '物业费', amount: '280.00', dueDate: '2023-11-30' },
    { id: '102', property: '2号楼2单元302', type: '水电费', amount: '156.50', dueDate: '2023-11-25' },
    { id: '103', property: '3号楼1单元501', type: '物业费', amount: '320.00', dueDate: '2023-11-30' },
    { id: '104', property: '1号楼3单元203', type: '停车费', amount: '180.00', dueDate: '2023-11-20' },
    { id: '105', property: '2号楼1单元401', type: '水电费', amount: '120.30', dueDate: '2023-11-25' }
  ]
}

// 格式化日期
const formatDate = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0')
  const day = now.getDate().toString().padStart(2, '0')
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekDay = weekDays[now.getDay()]
  currentDate.value = `${year}年${month}月${day}日 ${weekDay}`
}

// 组件挂载时初始化数据
onMounted(() => {
  formatDate()
  initRecentRepairs()
  initFeeReminders()
})
</script>

<style scoped>
.home-container {
  width: 100%;
}

.welcome-section {
  margin-bottom: 20px;
}

.welcome-section h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.welcome-section p {
  margin: 0;
  color: #606266;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  font-size: 36px;
  margin-right: 20px;
}

.icon-building {
  color: #409eff;
}

.icon-tools {
  color: #67c23a;
}

.icon-wallet {
  color: #e6a23c;
}

.icon-user {
  color: #f56c6c;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  color: #606266;
  margin-top: 5px;
}

.tables-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.table-card {
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-weight: bold;
  color: #303133;
}

.quick-actions {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.quick-actions h3 {
  margin: 0 0 20px 0;
  color: #303133;
}

.action-buttons {
  display: flex;
  gap: 20px;
}
</style>